<template>
	<div class="container-full">
		<div class="page-top">
			<img class="back-image" src="../../../static/images/back-environmental-protection.png" />
			<!-- <dl class="notice" v-if="this.$store.state.options.user.oda.notice != null">
				<dt><img src="../../../static/images/notice-red-mini.png" /></dt>
				<dd @click="$router.push('/public/message-detail?id=' + $store.state.options.user.oda.notice.id)">{{ $store.state.options.user.oda.notice.title || '暂时还没有公告' }}</dd>
			</dl> -->
			<div class="portrait" @click="$router.push('/public/personalData')">
				<img v-if="!userInfo.pic" src="../../../static/images/user-portrait.png" />
				<img v-else :src="userInfo.pic" />
			</div>
		</div>
		<div class="page-middle">
			<div class="integral" @click="$router.push('/shop/integral')">
				<img src="../../../static/images/integral.png" />
				<p>积分</p>
			</div>
			<div class="user-info" @click="$router.push('/public/personalData')">
				<p>{{userInfo.realname}}</p>
				<p>{{userInfo.zhicheng}}</p>
			</div>
			<div class="message" @click="$router.push('/public/message-list')">
				<img src="../../../static/images/message.png" />
				<p>消息</p>
			</div>
		</div>
		<div class="func-button-group">
			<dl @click="$router.push({name:'ShopOrderAdds', params:{reset: true}})">
				<dt><img src="../../../static/images/quoted-price.png" /></dt>
				<dd>
					<p>预估报价</p>
					<p>实时获取最新报价</p>
				</dd>
			</dl>
			<dl @click="$router.push('/shop/wallet')">
				<dt><img src="../../../static/images/wallet-blue.png" /></dt>
				<dd>
					<p>我的钱包</p>
					<p>查看我的收支记录</p>
				</dd>
			</dl>
		</div>
		<div class="nav-menu-button bottom-ash-line">
			<title-normal title="我的订单" tip="查看全部订单" :route="clickShowOrderList" class="header" />
			<nav-group-normal :dataset="navButtonGroup" class="body" />
		</div>
		<div class="nav-menu">
			<van-cell @click="$router.push('/shop/stock-manage')" title="库存管理" is-link>
				<img slot="icon" width="23" src="../../../static/images/stock-control.png" />
			</van-cell>
			<van-cell @click="$router.push('/shop/shop-integral-list')" title="积分商城" is-link>
				<img slot="icon" width="23" src="../../../static/images/stock-control.png" />
			</van-cell>
			<van-cell @click="$router.push('/shop/shop-integral-order-list')" title="积分订单列表" is-link>
				<img slot="icon" width="23" src="../../../static/images/stock-control.png" />
			</van-cell>
		</div>
		<van-overlay :show="noticeSwitch" @click="noticeSwitch = false">
			<message-list class="message-list" />
		</van-overlay>
		<tab-group index="4" />
	</div>
</template>

<style lang="scss" scoped>
    .container-full {
        padding-bottom: 5.4rem;
    }

	.page-top {
		width: 100%;
		height: 28vh;
		position: relative;

		.back-image {
			position: absolute;
			top: 0rem;
			bottom: 0rem;
			left: 0rem;
			right: 0rem;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.notice {
			position: absolute;
			top: 0rem;
			width: 100%;
			margin: 0rem;
			padding: 0.7rem 1rem;
			display: flex;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
			box-sizing: border-box;

			dt {
				padding-right: 1rem;

				img {
					width: 1.4rem;
				}
			}

			dd {
				white-space: nowrap;
				flex: 1;
				margin: 0rem;
				padding: 0.05rem 0rem 0rem;
				color: #ffffff;
				font-size: 1.3rem;
			}
		}

		.portrait {
			position: absolute;
			left: 50%;
			bottom: -18%;
			width: 26%;
			margin-left: -13%;
			border-radius: 50%;
			overflow: hidden;

			img {
				position: absolute;
				top: 0rem;
				bottom: 0rem;
				left: 0rem;
				right: 0rem;
				width: 100%;
				height: 100%;
			}
		}
		.portrait:after {
			content: "";
			display: block;
			padding-top: 100%;
		}
	}

	.page-middle {
		display: flex;
		justify-content: center;
		align-items: center;

		.integral,
		.message {
			flex: 0 0 35%;
			text-align: center;

			img {
				width: 2.5rem;
			}

			p {
				margin: 0rem;
				padding: 0rem;
				font-size: 1.4rem;
				color: #666666;
			}
		}

		.user-info {
			margin-top: 4.5rem;
			flex: 1;
			text-align: center;

			p {
				margin: 0rem;
				padding: 0rem;
			}
			p:first-child {
				font-size: 1.9rem;
				font-weight: bold;
			}
			p:last-child {
				margin-top: 0.6rem;
				font-size: 1.4rem;
				color: #999999;
			}
		}
	}

	.func-button-group {
		display: flex;
		padding: 1.5rem 0.2rem 1.3rem;

		dl {
			flex: 1;
			margin: 0.8rem;
			border: 0.1rem solid rgba(225, 228, 233, 0.3);
			border-radius: 0.5rem;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

			padding: 1rem;
			display: flex;
			align-items: center;

			dt {
				flex: 0 0 30%;

				img {
					width: 100%;
					vertical-align: bottom;
				}
			}

			dd {
				flex: 1;
				padding-left: 1rem;

				p {
					margin: 0rem;
					padding: 0rem;
				}
				p:first-child {
					margin-bottom: 0.5rem;
					color: #333333;
					font-size: 1.4rem;
				}
				p:last-child {
					margin-bottom: 0.15rem;
					color: #999999;
					font-size: 1.1rem;
				}
			}
		}
	}

	.nav-menu-button {
		padding: 1rem;

		.header {
			margin-top: 0.2rem;
			padding-bottom: 1.3rem;
			border-bottom: 0.1rem solid #eeeeee;
		}

		.body {
			margin: 2rem 0rem 1.6rem;
		}
	}

    .message-list {
        position: fixed;
        top: 20%;
        bottom: 30%;
        left: 5%;
        right: 5%;
        background-color: #ffffff;
        overflow-y: auto;
        border-radius: 0.3rem;
    }

	.nav-menu {
		// margin: 0rem -0.5rem;
		.van-cell {
			padding: 10px !important;
		}
	}

	.van-icon__image {
		width: 1.5em !important;
		height: 1.5em !important;
	}

	.van-cell__title span {
		padding-left: 0.5rem !important;
		position: relative;
		top: -0.5px;
	}
</style>

<script>
	import { Cell, CellGroup, Overlay } from 'vant';

	import TitleNormal from '../../components/currency/title/normal.vue';
	import NavGroupNormal from '../../components/currency/nav-group/normal.vue';

	import TabGroup from "../../components/currency/nav-group/shop.vue";
	import MessageList from "../public/message-list.vue";

	export default {
		name: 'ShopIndex',
		components: {
			[Cell.name]: Cell, [CellGroup.name]: CellGroup, [Overlay.name]: Overlay,
			TitleNormal, NavGroupNormal, TabGroup, MessageList
		},
		data() {
			return {
				navButtonGroup: [
					{
						name: "待收取", route: {
							path: '/shop/order-listing',
							data: {
								index: 0
							}
						}
					},
					{
						name: "待确认", route: {
							path: '/shop/order-listing',
							data: {
								index: 1
							}
						}
					},
					{
						name: "已完成", route: {
							path: '/shop/order-listing',
							data: {
								index: 2
							}
						}
					},
					{
						name: "已取消", route: {
							path: '/shop/order-listing',
							data: {
								index: 3
							}
						}
					}
				]
			}
		},
		computed: {
			clickShowOrderList() {
				return {
					path: '/shop/order-listing'
				}
			},
			userInfo() {
				return this.$store.state.options.user.oda;
            },
            noticeSwitch: {
                get() {
                    return this.$store.state.options.notice.show;
                },
                set(val) {
                    this.$store.commit('options/setElementValue', [
                        {
                            key: 'notice.show', value: val
                        }
                    ]);
                }
            }
		}
	}
</script>
